<template>
	<div class="address">
		<view-box ref="viewBox">
			<BaseHeader slot="header" title="地址管理" showBack="true" preventGoBack="true" backText="" :back="back" ></BaseHeader>
			<swipeout class="mtHeader">
			    <swipeout-item transition-mode="follow" v-for="(address,index) in addresss" :key="address.id">
			        <div slot="right-menu">
			          	<swipeout-button @click.native="removeAddress(address.id)" type="warn"><img v-bind:src="delIcon"></swipeout-button>
			        </div>
			        <div slot="content" class="content">
			        	<flexbox>
					      	<flexbox-item :span="1/6" >
					      		<div class="username">{{address.userName}}</div>
					      		<div class="isDefault" v-if="address.isDefault">默认</div>
					      	</flexbox-item>
					      	<flexbox-item :span="4/6">
					      		<div class="txt">{{address.phone}}</div>
					      		<div class="txt lodesc">{{address.province}}{{address.city}}{{address.area}}{{address.district}}</div>
					      	</flexbox-item>
					      	<flexbox-item :span="1/6"><img v-bind:src="editIcon" class="editIcon" v-on:click="edit(address.id)"></flexbox-item>
					    </flexbox>
			        </div>
			    </swipeout-item>
			</swipeout>
			<div class="addAddress"  slot="bottom">
				<x-button @click.native="newAddress">+ 新增地址</x-button>
			</div>
		</view-box>
		<Update ref="update" :callback="get"></Update>
	</div>
</template>
<script>
import {Swipeout, SwipeoutItem, SwipeoutButton,Flexbox, FlexboxItem,XButton,ViewBox } from 'vux'

import BaseHeader from 'touch/components/common/header';
import Update from 'touch/components/home/service/address/update';
import Axios from 'touch/config/axios';

export default{
	components :{
		BaseHeader,
		Swipeout,
		SwipeoutItem,
		SwipeoutButton,
		Flexbox,
    	FlexboxItem,
    	XButton,
    	Update,
    	ViewBox,
	},
	data () {
		return {
			editIcon : require('touch/assets/icon/edit.png'),
			delIcon : require('touch/assets/icon/delete.png'),
			addresss : [],
		}
	},
	methods:{
		back(){
			this.$router.go(-1);
		},
		newAddress(){
			this.$refs['update'].show = true;
			this.$refs['update'].title = '新建地址';
		},
		get(){
			Axios.Home.Address.GetList({path:this.$route.path,})
	        .then(res =>{
	        	this.addresss = [];
	        	if(res.code==1){
	        		this.$vux.toast.show({type : 'warn', text: res.msg});return false;
	        	}
	        	this.addresss = res.data;
	        })
		},
		edit(id){
			this.$refs['update'].form.id = id;
			this.$refs['update'].title = '修改地址';
			this.$refs['update'].show = true;
		},
		removeAddress(id){
			Axios.Home.Address.Delete({id:id})
	        .then(res =>{
	        	if(!res) return false;
	        	this.get();
	        })
		}
	},
	created:function(){
		this.get();
	}
}
</script>
<style>
	.address {height:100%;width: 100%;overflow: hidden;}
	.address .addAddress{bottom: 0; width: 100%;}
	.address .addAddress button{width: 90%; margin-bottom: 10px;}
	.address .vux-popup-dialog{background: #ffffff;}
	.address .vux-swipeout-content{line-height: 40px;}
	.address .content{padding-left:15px;font-size: 14px;line-height: 60px;}
	.address .username{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;line-height: 28px;}
	.address .isDefault{line-height: 13px; border: 1px solid #d02929; border-radius: 3px; width: 32px; padding: 1px; text-align: center; color: #d02929;}
	.address .txt{clear: both;line-height: 30px;}
	.address .lodesc{color: #b3afaf;line-height: 14px;}
	.address .editIcon{vertical-align: middle;}
	.address .vux-flexbox{padding-bottom: 5px;border-bottom: 1px solid #b3afaf;}
	.address .weui-btn_default {color: #e45252 !important;border:1px solid #e45252 !important;font-size:16px;}
</style>